<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.css" />
    <title>Cool Custom Video Control 😎</title>
  </head>
  <body>
    <div class="player">
      <video
        src="./video.mp4"
        type="video/*"
        class="player__video viewer"
      ></video>

      <div class="player__controls">
        <div class="progress">
          <div class="progress__filled"></div>
        </div>
        <button class="player__button toggle" title="Toggle Play">
          ►
        </button>
        <input
          type="range"
          name="volume"
          class="player__slider"
          min="0"
          max="1"
          step="0.05"
          value="1"
        />
        <input
          type="range"
          name="playbackRate"
          class="player__slider"
          min=".5"
          max="2"
          step="0.05"
          value="1"
        />
        <button data-skip="-10" class="player__button">« 10s</button>
        <button data-skip="25" class="player__button">25s »</button>
        <button class="player__button fullscreen">Fullscreen</button>
      </div>
    </div>
  </body>

  <script src="./script.js"></script>
</html>
